<template>
	<view class="container u-flex-column">
		<view class="search">
			<u-search placeholder="请输入搜索关键字" v-model="keyword" :showAction="false" @clickIcon="goSearch"
				@search="goSearch"></u-search>
		</view>
		<view class="mescroll-container u-flex-fill">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="{use: false}">
				<u-tabs :list="categories" :current="current" @change="({index}) => current = index"></u-tabs>
				<view class="tags-wrap">
					<view class="tag" v-for="item in category.tags" :key="item.name">
						<u-tag :text="item.name" plain :color="item.color" :borderColor="item.color"
							@click="tagClick(item.name)"> </u-tag>
					</view>
				</view>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import {
		getRandomColor
	} from "../../utils/index.js"
	import MescrollMixin from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		list
	} from "@/api/category.js"
	import {
		mapMutations
	} from "vuex"

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				categories: [],
				current: 0,
				keyword: ''
			}
		},
		computed: {
			category() {
				return this.categories.length > 0 ? this.categories[this.current] : []
			}
		},
		mounted() {

		},
		methods: {
			...mapMutations('search', ["setParams"]),
			getCategory() {
				list().then(data => {
					this.categories = data.map(item => {
						const tags = JSON.parse(item.tag)
						const colors = getRandomColor({
							count: tags.length
						})
						item.tags = tags.map((tag, i) => ({
							name: tag,
							color: colors[i],
							checked: false
						}))
						return item
					})
					this.mescroll.endDownScroll()
				})
			},
			goSearch(value) {
				this.setParams({
					title: this.keyword
				})
				uni.$u.route({
					url: 'pages/search/search',
				})
			},
			tagClick(name) {
				this.setParams({
					category: this.category.name,
					tags: name
				})
				uni.$u.route({
					url: 'pages/search/search'
				})
			},
			downCallback() {
				this.getCategory()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;

	}

	.container {
		height: 100%;
		overflow: hidden;

		.mescroll-container {
			// flex: 1;
		}

		// padding: 20rpx;
		.search {
			padding: 20rpx;
			background-color: #fff;
		}
	}

	.tags-wrap {
		// margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 10rpx;
	}

	.tag {
		margin: 10rpx 10rpx;
		display: inline-block;

		/deep/ .u-tag {
			display: flex;
			justify-content: center;
		}
	}
</style>
